<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ajax</title>
	<style type="text/css">
		.profile{
			width: 400px;
			margin: 0 auto;
			height: 400px;
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<div class="profile">
		<p><span>姓名：</span><span id="sname"></span></p>
		<p><span>年龄：</span><span id="sage"></span></p>
		<p><span>朋友：</span><span id="sfriends"></span></p>		
	</div>

	省<select id="province">
		<option>广西</option>
	</select>
	市<select id="city">
		<option>柳州</option>
	</select>
	区<select id="area">
		<option>鱼峰</option>
	</select>



	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">

		$.get('data/student.json',function(res){

			$('#sname').text(res.name);
			$('#sage').text(res.age);

			var fname='';
			for(var i=0;i<res.friends.length;i++){
				fname +=res.friends[i].name +"  ";
			}

			$('#sfriends').text(fname);			
		});
		/*把省级的信息添加到下拉列表*/
			$.get('data/province.json',function(res){

				$('#province').empty();
				for(var i=0;i<res.length;i++){
					var p = res[i];
					var option = '<option>'+p.name+'</option>';
					$('#province').append(option);
				} 
			})

			/*把市级的信息添加到下拉列表*/
			$.get('data/city.json',function(res){

				$('#city').empty();
				for(var i=0;i<res.length;i++){
					var p = res[i];
					var option = '<option>'+p.name+'</option>';
					$('#city').append(option);
				} 
			})

			/*把区级的信息添加到下拉列表*/
			$.get('data/area.json',function(res){

				$('#area').empty();
				for(var i=0;i<res.length;i++){
					var p = res[i];
					var option = '<option>'+p.name+'</option>';
					$('#area').append(option);
				} 
			})
          /*过滤自动跳转到相应的地方*/
			$('#city').change(function(){

			var cid = $(this).val();

			var tmp = [];

			$.get('data/area.json',function(res){

				for(var i=0;i<res.length;i++){
					if(res[i].pid == cid){
						console.log(res[i]);
						tmp.push(res[i]);
					}
				}

				$('#area').empty();

				for(var j=0;j<tmp.length;j++){
					var option = '<option>'+tmp[j].name+'</option>';
					$('#area').append(option);
				}
			})

		});
	</script>

</body>
</html>